<template>
  <div class="EquipmentManage">
    <el-card>
      <div class="search-box">
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="newAdd"
        >{{ $t('add') }}</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-refresh-left"
          plain
          @click="refresh"
        >{{ $t('refresh') }}</el-button>
        <el-button
          type="primary"
          icon="el-icon-folder-checked"
          plain
          @click="doSave"
        >{{ $t('saveLocation') }}</el-button>
      </div>
      <el-col :key="count">
        <div
          id="drag-content"
          :style="{'background-image': layoutAttr.image ? 'url(' + baseApi + '/' + layoutAttr.image + ')': '',}"
        >
          <div
            v-drag
            v-for="i in drayList"
            :style="{transform: `translate(${i.left}px, ${i.top}px)`}"
            :key="i.id"
            class="dragBox"
            @dblclick="delItem(i)">
            {{ i.eqpName }}
          </div>
        </div>
      </el-col>
    </el-card>
    <addDialog ref="addForm" @getLayoutEqps="getLayoutEqps" />
  </div>
</template>
<script>
import layoutApi from '@/api/production/layoutDesign'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import addDialog from './components/addDialog'
import drag from '@/directive/drag'
import { mapGetters } from 'vuex'
export default {
  name: 'EquipmentManage',
  components: {
    addDialog
  },
  directives: {
    drag: drag
  },
  mixins: [mySetting, networkTips],
  data() {
    return {
      drayList: [],
      isLoading: false,
      count: 0,
      layoutAttr: {}
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  created() {
    this.getLayoutEqps()
  },
  methods: {
    refresh() {
      // this.reload()
      // 刷新组件 :key唯一键
      this.count++
    },
    // 新增
    newAdd() {
      this.$refs.addForm.openDialog()
    },
    // 获取区域机台位置
    async getLayoutEqps() {
      const res = await layoutApi.getLayoutEqps({
        LayoutId: this.$route.params.LayoutId
      })
      this.drayList = res.data
      const layoutInfo = await layoutApi.getLayoutsInfo({ id: this.$route.params.LayoutId })
      this.layoutAttr = layoutInfo.data
    },
    // 保存位置
    doSave() {
      const arr = [...document.getElementsByClassName('dragBox')]
      const reg = /^translate[(]|px|[)]/gi
      // 之后设置成百分比
      // const dragBox = document.getElementById('drag-content')
      let layoutId = ''
      const updateEqpList = []
      this.drayList.forEach((ele, i) => {
        const style = arr[i].style.transform
        const [left, top] = style.replace(reg, '').split(',')
        layoutId = ele.layoutId
        updateEqpList.push({
          eqpId: ele.eqpId,
          id: ele.id,
          width: arr[i].offsetWidth,
          height: arr[i].offsetHeight,
          left: Number(left),
          top: Number(top)
        })
      })
      layoutApi.saveLocation({ layoutId, updateEqpList }).then((res) => {
        this.netTips(res, this.getLayoutEqps)
      })
    },
    // 双击删除事件
    delItem(val) {
      this.$confirm(
        `<p>${this.$t('unrecoverableAfterDeletion')}</p>`,
        this.$t('tip'),
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        layoutApi.deleteItem({ ids: [val.id] }).then((res) => {
          this.netTips(res, this.getLayoutEqps)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.EquipmentManage{
  width: 100%;
  height: 100%;
  padding-bottom: 33px;
}
.search-box {
  height: 50px;
}
#drag-content {
  position: relative;
  width: 100%;
  height: 1000px;
  background-color: #fff;
  background-size: 100% 100%;
  border: 1px solid #ccc;
  padding: 0;
}
.dragBox {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  cursor: move;
}
</style>
